<template>
  <div class="content" :style="{'--paging-optionColor': optionColor,'--paging-bgColor':bgColor}">
    <div class="pagination">
      <ul>
        <!--pages or li are comes from javascript -->

        <li
          :class="['btn', 'prev',nowPage != 1 ? 'pointer' : 'disabled']"
          @click="() => change('pre')"
          style="margin-left: 6px"
        >
          <span>上一页</span>
        </li>

        <li
          :class="['first', 'pointer', 'numb', nowPage == index ? 'sel' : '']"
          @click="() => assignment(1)"
          v-show="showPageNumber != 0"
        >
          <span>1</span>
        </li>
        <li v-show="showPageNumber != 0" style="margin-right: 10px">...</li>
        <li
          :class="[
            'first',
            'pointer',
            'numb',
            'pointer',
            nowPage == index + showPageNumber ? 'sel' : '',
          ]"
          v-for="index of showPage"
          :key="index"
          @click="() => assignment(index + showPageNumber)"
        >
          <span>{{ index + showPageNumber }}</span>
        </li>
        <li v-show="showPageNumber != last_page - showPage">...</li>

        <li
          :class="['first', 'pointer', 'numb', nowPage == index ? 'sel' : '']"
          @click="() => assignment(last_page)"
          style="margin-left: 6px"
          v-show="showPageNumber != last_page - showPage"
        >
          <span>{{ last_page }}</span>
        </li>

        <li
          :class="[
            'btn',
            'next',
            nowPage != last_page ? 'pointer' : 'disabled',
          ]"
          @click="() => change('next')"
        >
          <span>下一页</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from "vue";

interface Props {
  total_porp?: number;         //总数量
  pageSize_porp?: number;      //一页多少条
  showPage_porp?: number;      //显示的页数块数量
  page_default?: number;      //默认页数
  optionColor?:string;        //选项颜色
  bgColor?:string;            //背景颜色
}

const props = withDefaults(defineProps<Props>(), {
  total_porp: 1000,
  pageSize_porp: 10,
  showPage_porp: 9,
  page_default: 1,
  bgColor:'#f7f7f7',
  optionColor:`#3a3a3a`,
});
const nowPage = ref<number>(props.page_default);
const index = ref<number>(0);

const showPageNumber = computed(() => {
  let left = Math.ceil(props.showPage_porp / 2);
  if (nowPage.value - left > 0) {
    if (nowPage.value > last_page.value - (showPage.value - left)) {
      return last_page.value - showPage.value;
    } else {
      return nowPage.value - left;
    }
  } else {
    return 0;
  }
});

const last_page = computed(() => {
  return Math.ceil(props.total_porp / props.pageSize_porp);
});
const showPage = computed(() => {
  if (last_page.value < props.showPage_porp) {
    return last_page.value;
  } else {
    return props.showPage_porp;
  }
});

const emits = defineEmits<{
  (event: "change", nowPage: number): void;
}>();

const change = (type: string) => {
  switch (type) {
    case "pre":
      if (nowPage.value != 1) {
        nowPage.value--;
        emits("change", nowPage.value);
      }
      break;
    case "next":
      if (nowPage.value != last_page.value) {
        nowPage.value++;
        emits("change", nowPage.value);
      }
  }
};

const assignment = (param: number) => {
  nowPage.value = param;
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
.content {
  display: flex;
  justify-content: center;
  padding-left: 0.0521rem;
  padding-right: 0.0521rem;
}
</style>
